<template>
	<view>
		<u-navbar title="提现" title-color="black" :title-size="35" :title-bold="true" :immersive="true"
			:background="background" :border-bottom="false"></u-navbar>
		<view class="flex-col flex-auto group space-y-45">
			<view class="flex-col group_2">
				<view class="flex-col section space-y-72">
					<text class="self-start font_1 text_2">提现金额</text>
					<view class="flex-col">
						<view class="flex-row justify-between group_3">
							<view class="flex-row items-center self-center space-x-16">
								<text class="text_3">￥</text>
								<input placeholder="请输入提现金额" v-model="money" />
							</view>
							<text class="self-start font_1 text_4" @click="allWithdraw">全部提现</text>
						</view>
						<view class="divider"></view>
					</view>
				</view>

				<text class="self-start font_1 text_5">提现信息:</text>
				<view class="flex-col list space-y-20">
					<view class="flex-row justify-between items-center list-item" @click="openAlipay" v-if="account">
						<view class="flex-row items-center">
							<image class="shrink-0 image_3"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796462213848784174.png" />
							<text class="font_1 text_6 text_7">姓名:{{name}}</text>
							<text class="font_1 text_6 text_7">账号:{{account}}</text>
						</view>
						<image class="image_5 image_6"
							src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
					</view>
					<!-- <view class="flex-row justify-between items-center list-item" @click="openAlipay" v-if="!account">
						<view class="flex-row items-center">
							</u-radio-group>
							<image class="shrink-0 image_3"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796462213848784174.png" />
							<text class="font_1 text_6 text_7">设置支付宝提现账号</text>
						</view>
						<image class="image_5 image_6"
							src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
					</view> -->
					<!-- <u-modal v-model="show" title="账号" confirm-color="#19C865" :title-style="{color: 'black'}">
						<view class="slot-content">
							<view style="display: flex; align-items: center; width: 200px; margin: auto;">
								<view>姓名：</view><input class="time" />
							</view>
							<view style="display: flex; align-items: center; width: 270px; height: 72px;">
								<view>支付宝账号：</view><input class="time" />
							</view>
						</view>
					</u-modal> -->
					<view class="flex-row justify-between items-center list-item" @click="addbank" v-if="cardname">
						<view class="flex-row items-center">
							<image class="shrink-0 image_3" style="width: 70rpx"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16797270869723941761.png" />
							<text class="font_1 text_6 text_7">银行卡号：{{cardaccount}}</text>
						</view>
						<image class="image_5 image_6"
							src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
					</view>

					<view class="flex-row justify-between items-center list-item" @click="addbank" v-if="!cardname">
						<view class="flex-row items-center">
							<image class="shrink-0 image_3" style="width: 70rpx"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16797270869723941761.png" />
							<text class="font_1 text_6 text_7">添加银行卡</text>
						</view>
						<image class="image_5 image_6"
							src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796355636573951117.png" />
					</view>
					<text class="self-start font_1 text_5">提现方式:</text>
					<view style="margin-left: 30rpx;">
						<u-radio-group @change="checkboxChange">
							<!-- <u-radio v-model="checked" shape="circle" :name="1">支付宝</u-radio> -->
							<u-radio v-model="checked1" shape="circle" :name="2">银行卡</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="flex-col justify-start items-center button" v-if="isloding==false" @click="affirm"><text
					class="text_9">确认提现</text></view>
			<view class="flex-col justify-start items-center button" v-if="isloding==true"><text
					class="text_9">确认提现</text></view>
			<view class="withdraw-record" @click="toDetail">
				提现记录
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false,
				withdraw: '',
				money: '',
				name: '',
				account: '',
				cardname: '',
				cardphone: '',
				cardaccount: '',
				checked: '',
				checked1: '',
				alipay: false,
				cardpay: false,
				status: '',
				type: '',
				isloding: '',
			};
		},
		onLoad(options) {
			this.name = uni.getStorageSync('alipayname')
			this.account = uni.getStorageSync('alipayaccount')
			this.cardname = uni.getStorageSync('cardname')
			this.cardphone = uni.getStorageSync('cardphone')
			this.cardaccount = uni.getStorageSync('cardaccount')
			this.Withdrawal()			
		},
		onShow() {
			this.name = uni.getStorageSync('alipayname')
			this.account = uni.getStorageSync('alipayaccount')
			this.cardname = uni.getStorageSync('cardname')
			this.cardphone = uni.getStorageSync('cardphone')
			this.cardaccount = uni.getStorageSync('cardaccount')
			this.Withdrawal()
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url: '/pagesB/withdrawRecord/withdrawRecord'
				})
			},
			checkboxChange(n) {
				this.type = n
				console.log('change', n);
			},
			//全部提现
			allWithdraw() {
				this.money = this.withdraw
			},
			//确认提现
			affirm() {
				if (this.money == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写输入金额'
					})
					return
				}
				if (!this.name && !this.cardname) {
					console.log(this.name, this.cardname, '请设置提现方式')
					uni.showToast({
						icon: 'none',
						title: '请填写提现信息'
					})
					return
				}
				if (!this.type) {
					uni.showToast({
						icon: 'none',
						title: '请勾选提现方式'
					})
					return
				}
				
				if (this.type == 2) {
					this.isloding = true
					this.$Api.applyWithdrawal({
						userId: uni.getStorageSync('userid'),
						money: this.money,
						type: this.type, //1支付宝 2银行卡
						payee: this.cardname, //收款人姓名
						account: this.cardaccount, //支付宝账户 银行卡账户
						phone: this.cardphone //电话号
					}).then(res => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '发起成功 请等待后台审核',
								duration: 3000
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/main/main'
								})
							}, 2000)
						}else {
							uni.showToast({
								icon: 'none',
								title: res.data.data,
								duration: 3000
							})
							this.isloding = false
						}

						console.log(res)
					}, err => {})
				} else if (this.type == 1) {
					this.isloding = true
					this.$Api.applyWithdrawal({
						userId: uni.getStorageSync('userid'),
						money: this.money,
						type: this.type, //1支付宝 2银行卡
						payee: this.name, //收款人姓名
						account: this.account, //支付宝账户 银行卡账户
					}).then(res => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '发起成功 请等待后台审核',
								duration: 2000
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/main/main'
								})
							}, 2000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.data,
								duration: 3000
							})
							this.isloding = false
						}

						console.log(res, '银行卡提现')
					}, err => {})
				}

			},
			//提现金额
			Withdrawal() {
				this.$Api.getUserWithdrawal({
					userId: uni.getStorageSync('userid'),
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					this.withdraw = res.data.data.approve
					console.log(res.data.data.approve, '可提现金额')
				}, err => {})
			},
			addbank() {
				uni.navigateTo({
					url: '/pagesB/addBankcard/addBankcard'
				})
			},
			openAlipay() {
				uni.navigateTo({
					url: '/pagesB/addAlipay/addAlipay'
				})
				// this.show = true;

			}
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.slot-content {
		width: 260px;
		/* height: 40px; */
		margin: 20px;
		text-align: center;
	}

	.time {
		border: 1px solid #dddddd;
		border-radius: 8rpx;
		width: 400rpx;
		height: 60rpx;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.group {
		padding: 0 32rpx 640rpx;
		overflow-y: auto;
		margin-top: 160rpx;
	}

	.space-y-45>view:not(:first-child),
	.space-y-45>text:not(:first-child),
	.space-y-45>image:not(:first-child) {
		margin-top: 45rpx;
	}

	.group_2 {
		padding: 35rpx 0;
	}

	.section {
		padding: 34rpx 17rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-y-72>view:not(:first-child),
	.space-y-72>text:not(:first-child),
	.space-y-72>image:not(:first-child) {
		margin-top: 72rpx;
	}

	.font_1 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_2 {
		margin-left: 13rpx;
	}

	.group_3 {
		padding-bottom: 22rpx;
	}

	.space-x-16>view:not(:first-child),
	.space-x-16>text:not(:first-child),
	.space-x-16>image:not(:first-child) {
		margin-left: 16rpx;
	}

	.text_3 {
		color: #222222;
		font-size: 72rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 72rpx;
	}

	.section_2 {
		background-color: #19c86580;
		width: 3rpx;
		height: 57rpx;
	}

	.text_4 {
		margin-right: 11rpx;
		margin-top: 31rpx;
		color: #19c865;
	}

	.divider {
		margin: 0 13rpx;
		background-color: #eeeeee;
		height: 2rpx;
	}

	.text_5 {
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.list {
		margin-top: 22rpx;
	}

	.space-y-20>view:not(:first-child),
	.space-y-20>text:not(:first-child),
	.space-y-20>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.list-item {
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image_4 {
		width: 24rpx;
		height: 24rpx;
	}

	.image_3 {
		margin-left: 36rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.text_6 {
		line-height: 27rpx;
	}

	.text_7 {
		margin-left: 23rpx;
	}

	.image_5 {
		width: 13rpx;
		height: 24rpx;
	}

	.image_6 {
		margin-right: 3rpx;
	}

	.button {
		padding: 30rpx 0;
		background-color: #19c865;
		border-radius: 44rpx;
	}

	.text_9 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}
	.withdraw-record {
		margin: 0 auto;
		color: #a2a2a2;
	}
</style>